import React from "react";
import "./App.css";
import { routes } from "./router";
import { Route, Routes, NavLink, useNavigate } from "react-router-dom";
export default function App() {
  const navigate = useNavigate();
  return (
    <div>
      <div className="content">
        <Suspense
          fallback={
            <div className="lazyImg">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fseopic.699pic.com%2Fphoto_origin%2F40108%2F7646.png%21bd800&refer=http%3A%2F%2Fseopic.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665667307&t=40da997dda000214d79ae08279e96df3"
                style={{ width: 150, height: 150 }}
              />
            </div>
          }
        >
          <Routes>
            {routes.map((item) => (
              <Route
                path={item.path}
                key={item.path}
                element={<item.element />}
              >
                {/* {item.children && item.children.map((ite, j) => (
                  <>
                    <Route
                      key={ite.path}
                      path={ite.path}
                      element={<ite.element />}
                    ></Route>
                  </>
                ))} */}
              </Route>
            ))}
          </Routes>
        </Suspense>
        1111
      </div>
      {/* <ul className="ul"> */}
      {/* {routes
          .filter((item) => !item.hidden)
          .map((item) => (
            <li key={item.path}>
              <NavLink to={item.path}>
                <div>

                  {item.icon ? <item.icon fontSize={22} /> : ''}
                </div>
                {item.title}
              </NavLink>
            </li>
          ))} */}
      {/* </ul> */}
    </div>
  );
}
